<template>
  <div class="list_container flex both-100">
    <Breadcrumb :title="pageTitle" />
    <div class="content_container">
      <!-- 搜索模块 -->
      <el-form ref="searchMap" :inline="true" :model="searchMap" class="serach_wrapper flex-space-between">
        <div class="search">
          <el-form-item prop="userName" size="small">
            <el-input v-model="searchMap.userName" placeholder="角色名称"></el-input>
          </el-form-item>
          <el-form-item prop="phonenumber" size="small">
            <el-input v-model="searchMap.phonenumber" placeholder="权限字符"></el-input>
          </el-form-item>
          <el-form-item prop="status" style="width: 220px" size="small">
            <el-select v-model="searchMap.status" placeholder="状态">
              <!-- <el-option v-for="option in PayOption" :key="option.type" :label="option.name" :value="option.type"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item prop="personnelCreateTime" size="small">
            <el-date-picker v-model="searchMap.personnelCreateTime" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <el-form-item class="flex">
            <el-button @click="handleSearch()" class="btn_primary">查询</el-button>
            <el-button @click="handleReset()" class="btn_cancel">重置</el-button>
          </el-form-item>
        </div>
        <div class="edit">
          <el-form-item class="flex">
            <el-button @click="handleAdd()" class="btn_primary" icon="el-icon-plus">
              新增
            </el-button>
          </el-form-item>
        </div>
      </el-form>
      <!-- 搜索模块over -->

      <!-- 表格模块 -->
      <div class="table_container">
        <el-table :data="postList" stripe class="per_table" style="width: 100%">
          <el-table-column prop="postId" label="岗位编号"></el-table-column>
          <el-table-column prop="postCode" label="岗位编码"></el-table-column>
          <el-table-column prop="postName" label="岗位名称"></el-table-column>
          <el-table-column prop="postSort" label="权限标识"></el-table-column>
          <el-table-column key="status" label="状态">
            <template slot-scope="scope">
              <!-- <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" /> -->
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="createTime">
            <template slot-scope="scope">
              <div class="button-group">
                <span type="text" class="tag_primary" size="small" @click="handleEdit(scope.row, 'edit')">编辑</span>
                <span type="text" class="tag_warning" size="small" @click="handleDelete(scope.row, 'delect')">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 表格模块over -->

      <!-- 分页 -->
      <div class="pagination_container">
        <div></div>
        <el-pagination v-show="total>0" :total="total" :page-sizes="[10, 20]" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
      <!-- 分页over -->
    </div>
    <el-dialog title="岗位" :visible.sync="DialogVisiblePost" append-to-body>
      <CustomForm label-width="80px" label-position="left" :formItemConfig="formItemConfig" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="userDialogVisible = false" class="btn_cancel">取 消</el-button>
        <el-button type="primary" @click="submitFrom('addUserFrom')" class="btn_primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import CustomForm from '@/components/CustomForm'
import BaseSelect from '@/components/BaseForm/BaseSelect.vue'
import BaseMultipleSelect from '@/components/BaseForm/BaseMultipleSelect.vue'
import BaseCheckboxGroup from '@/components/BaseForm/BaseCheckboxGroup.vue'
import BaseClick from '@/components/BaseForm/BaseClick.vue'
import BaseRadioGroup from '@/components/BaseForm/BaseRadioGroup.vue'
import { listPost } from '@/api'
export default {
  name: 'role',
  data () {
    return {
      // 弹框
      DialogVisiblePost: false,
      formModel: {
        postStatus: []
      },
      // from 表单配置项
      formItemConfig: [
        {
          label: '岗位名称',
          prop: 'operId',
          span: 24,
          clearable: true,
        },
        {
          label: '岗位编码',
          prop: 'status',
          component: 'BaseRadioGroup',
          span: 24,
          width: '100%',
          options: [
            {
              label: '正常',
              value: '0',
            },
            {
              label: '停用',
              value: '1',
            }
          ],
        },
        {
          label: '岗位顺序',
          prop: 'status',
          component: 'el-input-number',
          span: 24,
          width: '30%',
          options: [
            {
              label: '正常',
              value: '0',
            },
            {
              label: '停用',
              value: '1',
            }
          ],
        },
        {
          label: '岗位状态',
          prop: 'status',
          component: 'BaseRadioGroup',
          span: 24,
          width: '100%',
          options: [
            {
              label: '正常',
              value: '0',
            },
            {
              label: '停用',
              value: '1',
            }
          ],
        },
        {
          label: '备注',
          prop: 'status',
          type: 'textarea',
          span: 24,
          width: '100%',
        },
          {
          label: '岗位顺序',
          prop: 'postStatus',
          component: BaseCheckboxGroup,
          span: 24,
          width: '30%',
          options: [
            {
              label: '正常',
              value: '0',
            },
            {
              label: '停用',
              value: '1',
            }
          ],
        },
      ],
      // 搜索条件
      searchMap: {},
      // 岗位列表
      postList: [],
      // 总条数
      total: 0,
      // 弹框显示
    }
  },
  created () {
    this.getList()
  },
  computed: {
    pageTitle () {
      return '岗位管理'
    }
  },
  methods: {
    getList () {
      listPost(this.searchMap).then(response => {
        const resp = response
        this.postList = resp.rows
        this.total = resp.total
      })
    },
    // 点击新增按钮触发
    handleAdd () {
      this.DialogVisiblePost = true
    },
    handleEdit () {
      this.DialogVisiblePost = true
    },
  },
  components: {
    Breadcrumb,
    CustomForm,
    BaseSelect,
    BaseMultipleSelect,
    BaseCheckboxGroup,
    BaseClick,
    BaseRadioGroup
  },
}
</script>

<style lang="less" scoped>
.list_container {
  flex-direction: column;
  background: url('@/assets/images/home/content.png') no-repeat;
  background-size: cover;
  .content_container {
    padding: 15px 20px;
    overflow-y: scroll;
  }
  .table_container {
    margin-bottom: 25px;
  }
  .pagination_container {
    display: flex;
    justify-content: space-between;
    height: 32px;
  }
}
</style>